<template>
  <div class="search">
    <SearchtopCom @search="fun" />
    <div class="box">
      <span>最近搜索</span
      ><span><van-icon name="delete-o" @click="del()" /></span>
      <div class="inbox">
        <van-button
        @click="golist(item.keyword)"
          class="btn1"
          plain
          type="primary"
          size="mini"
          color="#ccc"
          v-for="(item, index) in historylist"
          :key="index"
          >{{ item }}</van-button
        >
      </div>
    </div>
    <div class="box">
      <span>热门搜索</span
      ><span @click="empty()"> <van-icon name="delete-o" /></span>
      <div class="inbox">
        <van-button
          @click="golist(item.keyword)"
          class="btn1"
          plain
          type="primary"
          size="mini"
          color="#ccc"
          v-for="(item, index) in hotword"
          :key="index"
          >{{ item.keyword }}</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { fun_hotsearch } from "../api/index.js";

import { Search } from "vant";
import { Button } from "vant";
import SearchtopCom from "@/components/SearchtopCom";
import Vue from "vue";
import { Dialog } from "vant";

Vue.use(Dialog);
Vue.use(Button);
Vue.use(Search);
export default {
  data() {
    return {
      value: "",
      hotword: [],
      historylist: [],
    };
  },
  components: {
    SearchtopCom,
  },

  methods: {
    // 点击搜索列表
    golist(keyword) {
      this.$router.push({
        name: "searchlist",
        params: {
          keyword: keyword,
        },
      });
    },
    // 拿到子组件传过来的关键字
    fun(val) {
      this.historylist.unshift(val);
      console.log(this.historylist);
    },
    del() {
      Dialog.confirm({
        message: "确认删除历史记录吗？",
      })
        .then(() => {
          this.historylist=""
        })
        .catch(() => {
         return this.historylist
        });
      
    },
  },
  created() {
    fun_hotsearch().then((res) => {
      this.hotword = res.data.data;
      // console.log(this.hotword);
    });
  },
};
</script>

<style scoped>
.box {
  padding: 0.8333rem 0.8333rem;

  background-color: #fff;
}
.box span:nth-child(1) {
  font-weight: bold;
  font-size: 0.7778rem;
  display: inline-block;
  margin-right: 0.1667rem;
}
.inbox {
  margin-top: 0.2778rem;
}
</style>